<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <!--<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css" />-->
    <!-- <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css" />-->
    <link rel="stylesheet" href="css/index.css" />

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/mycss.css" />
</head>

<body>
    <div data-role="page" class="message" id="pageone" data-transition="slide" data-direction="reverse">
        <div data-role="panel" class="message" id="revealPanel" style="background:#020202;color: blanchedalmond"
            data-display="reveal">
            <p>已打卡127天</p>
            <a href="mine.html" target="_top"><img src="images/zzu.png"><span style="padding:10px;color: orange">Frank</span></a><br>
            <hr />
            <span>☆☆☆☆☆</span><br>
            <span>zookeeper...</span>
            <div>
                <hr />
                <ul data-role="listview" style="background:#666666;">
                    <li><a href="mine.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的信息</a></li>
                    <li><a href="theme.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right    ui-shadow-icon ui-btn-b"
                            target="_top">我的专题</a></li>
                    <li><a href="fav.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的收藏</a></li>
                    <li><a href="album.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的相册</a></li>
                    <li><a href="edit.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">修改信息</a></li>
                    <hr />
                    <li><a href="location.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的地址</a></li>
                    <li><a href="shop.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">商城</a></li>

                </ul>
                <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power" style="position: absolute;background: #ccc; bottom: 0%;width: 80%">注销</button>
            </div>
        </div>

        <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right" style="background:#020202;color: blanchedalmond">
            <h2>超级爬虫，搜你想要</h2>
            <form class="ui-filterable">
                <input id="myFilter" data-type="search" placeholder="根据名称搜索..">
            </form>
            <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">

                <li>
                    <a href="others.html" target="_top">zookeeper8464</a>
                </li>
                <li>
                    <a href="mine.html" target="_top">未闻花名</a>
                </li>
            </ul>
        </div>

        <div data-role="header" class="ui-btn ui-btn-b">
            <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
            <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
            <p align="center"> 小黑书</p>
        </div>
        <div data-role="main" class="ui-content"><a href="#overlayPanel" class="ui-btn">搜索</a>
            <div data-role="tabs" id="tabs">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#one" class="ui-link ui-btn ui-tabs-anchor ui-btn-active" data-ajax="false">生活圈</a></li>
                        <li><a href="#two" data-ajax="false">悦读吧</a></li>
                        <li><a href="#three" data-ajax="false">主题</a></li>
                    </ul>
                </div>
                <div id="one" class="ui-body-d ui-content">
                    <div>
                        <div class="ui-block-a">
                            <div class="ui-bar ui-bar-a" style="height:380px;margin: 10px">
                                <div style="float:left;width: 100%">
                                    <div style="width:100%;float: left;">
                                        <img src="images/mayun.png" style="max-width:100%;height:200px;display: block"
                                            alt="可樂鷄翅">
                                    </div>
                                    <div style="width:100%;float: left;height: 400px; overflow: hidden">
                                        <a href="content_two.html" target="_top">
                                            <p><span>年度码云新增项目排行榜 TOP 50，为它们打“call”...</span></p>
                                        </a>
                                        <p style="font-size: 12px;color: #666666">
                                            2018 年度码云新增项目排行榜 TOP 50 正式出炉 ...
                                        </p>
                                        <hr />
                                        <p style="width:100%;height: 100px;float:left">
                                            <span style="width:50px;height:120px;float:left">
                                                <img src="images/8464.png" style="width:50px;border-radius:50%" alt="" />
                                            </span>
                                            <span style="float:left;text-align: center;padding: 20px;color: orangered">zookeeper8464</span>
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="ui-block-a">
                            <div class="ui-bar ui-bar-a" style="height:380px;margin: 10px">
                                <div style="float:left;width: 100%">
                                    <div style="width:100%;float: left;">
                                        <img src="images/chengdu.jpg" style="max-width:100%;height:200px;display: block"
                                            alt="可樂鷄翅">
                                    </div>
                                    <div style="width:100%;float: left;height: 400px; overflow: hidden">
                                        <a href="content.html" target="_top">
                                            <p><span>重庆成都五天五日游...</span></p>
                                        </a>
                                        <p style="font-size: 12px;color: #666666">
                                            da1:七月份跟闺蜜去的，下午...
                                        </p>
                                        <hr />
                                        <p style="width:100%;height: 100px;float:left">
                                            <span style="width:50px;height:120px;float:left">
                                                <img src="images/zzu.png" alt="" />
                                            </span>
                                            <span style="float:left;text-align: center;padding: 20px;color: orangered">孫大爺的小吃货</span>
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div><!-- /grid-c -->
                </div>
                <div id="two" class="ui-body-d ui-content" style="padding:0em;">

                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><input type="reset" value="我的文章" data-theme="a" onclick="goTo('mine_article.html')"></div>
                        <div class="ui-block-b"><input type="submit" value="写文章✍" data-theme="b" onclick="goTo('write_article.html')"
                                )></div>
                    </fieldset>

                    <button class="ui-btn ui-btn-b">热门文章🔥</button>
                    <div>
                        <div class="lunbo">
                            <div class="lunbo-photo">
                                <div><a href="article.html" target="_top" style="width:100%;"><img src="images/book2.jpg"></a></div>
                                <div><a href="article.html" target="_top" style="width:100%;"><img src="images/book.jpg"></a></div>
                            </div>
                            <div class="lunbo-photo-daohang">
                                <ul>
                                    <li>
                                        <div class="on">1</div>
                                    </li>
                                    <li>
                                        <div>2</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>



                    <ul data-role="listview" data-split-icon="gear" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">

                        <li class="ui-li-has-alt ui-li-has-thumb ui-first-child"><a href="#" class="ui-btn">
                                <img src="images/book.jpg">
                                <h2>你是婚姻中的超级照顾者吗？</h2>
                                <p>关系，就像是一面镜子，而这面镜子的意义，就是让你重新认识自己的内心。</p>
                            </a>
                            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"
                                aria-haspopup="true" aria-owns="purchase" aria-expanded="false" class="ui-btn ui-btn-icon-notext ui-icon-eye"
                                title="Purchase album" onclick="goTo('article.html')"></a>
                        </li>
                        <li class="ui-li-has-alt ui-li-has-thumb"><a href="#" class="ui-btn">
                                <img src="images/book2.jpg">
                                <h2>如何与孩子谈死亡——给孩子的生命教育</h2>
                                <p>所谓“生命教育”，直白一点说就是关于生命的教育。主要是让孩子认识并珍爱</p>
                            </a>
                            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"
                                aria-haspopup="true" aria-owns="purchase" aria-expanded="false" class="ui-btn ui-btn-icon-notext ui-icon-eye"
                                title="Purchase album"></a>
                        </li>
                        <li class="ui-li-has-alt ui-li-has-thumb ui-last-child"><a href="#" class="ui-btn">
                                <img src="images/book3.jpg">
                                <h2>做父母最大的挑战，不是付出不易，而是克制太难</h2>
                                <p>当父母的眼里能看见孩子，就会时常觉得自己不够好，但为了孩子，又要克制自己去做得更好。所以，孩子其实给了父母一次新的机会去思考自己。</p>
                            </a>
                            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"
                                aria-haspopup="true" aria-owns="purchase" aria-expanded="false" class="ui-btn ui-btn-icon-notext ui-icon-eye"
                                title="Purchase album"></a>
                        </li>
                        <li class="ui-li-has-alt ui-li-has-thumb ui-last-child"><a href="#" class="ui-btn">
                                <img src="images/book3.jpg">
                                <h2>做父母最大的挑战，不是付出不易，而是克制太难</h2>
                                <p>当父母的眼里能看见孩子，就会时常觉得自己不够好，但为了孩子，又要克制自己去做得更好。所以，孩子其实给了父母一次新的机会去思考自己。</p>
                            </a>
                            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"
                                aria-haspopup="true" aria-owns="purchase" aria-expanded="false" class="ui-btn ui-btn-icon-notext ui-icon-eye"
                                title="Purchase album"></a>
                        </li>
                    </ul>
                    <button class="ui-btn ui-btn-b" onclick="goTo('more_article.html')">更多文章</button>

                </div>
                <div id="three" class="ui-body-d ui-content">
                    <div data-role="tabs" id="tabs">
                        <div data-role="navbar">
                            <div id="ui-bar-test" class="ui-bar ui-bar-a ui-corner-all">
                                <ul>
                                    <li><a href="#one" class="ui-link ui-btn ui-tabs-anchor ui-btn-active" data-ajax="false">生活方式</a></li>
                                    <li><a href="#two" data-ajax="false">电影</a></li>
                                    <li><a href="#three" data-ajax="false">心理学</a></li>
                                    <li><a href="#four" data-ajax="false">平面设计</a></li>
                                    <li><a href="#five" data-ajax="false">程序员</a></li>
                                    <li><a href="#six" data-ajax="false">出国</a></li>
                                    <li><a href="#seven" data-ajax="false">软件架构</a></li>
                                    <li><a href="#eight" data-ajax="false">Java</a></li>
                                    <li><a href="#nine" data-ajax="false">电子产品</a></li>
                                    <li><a href="#ten" data-ajax="false">审美</a></li>
                                </ul>

                            </div>
                            <div id="one" class="ui-body-d ui-content">
                                <div class="issue">
                                    <div style="width:100%;float:left;background:#F4F4F4;border-radius: 10px;padding: 10px;margin-top:4px">
                                        <a style="border:1px solid #3388CC">你在修电脑的时候遇到过哪些有趣的经历？</a>
                                        <p class="_p">
                                            <span>54</span>Eternaly, 咸鱼山地车骑手 <br>
                                            <div style="width:100%;float: left">
                                                <img src="images/zhihu.png" alt="" style="width:60%;">
                                                <div style="" class="sm_font">有一次老妈单位两台收银用的电脑犯了一样的毛病，开机过一会儿会死机，能用多久完全看脸，我过去之后怀疑是cpu过热导致的过热保护，于是就先拆开来清一下灰，结果拆开来被吓得不轻
                                                    这电脑好像好几年了一直在用也没人打理过，准备用纸硬着头皮擦干净的时候想到了这里有风枪，于是。。。
                                                    当然意识到该录像留念这一精彩时刻的时候已经吹完一台了，清灰效果还蛮好的，之后还拿我自己笔记本来吹了一下。。<br />
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <p class="sm_font grey">
                                        关注问题 43条评论 感谢 分享 收藏</p>
                                </div>
                                <div class="issue">
                                    <div style="width:100%;float:left;background:#F4F4F4;border-radius: 10px;padding: 10px;margin-top:4px">
                                        <a style="border:1px solid #3388CC">你在修电脑的时候遇到过哪些有趣的经历？</a>
                                        <p class="_p">
                                            <span>54</span>Eternaly, 咸鱼山地车骑手 <br>
                                            <div style="width:100%;float: left">
                                                <img src="images/zhihu.png" alt="" style="width:60%;">
                                                <div style="" class="sm_font">有一次老妈单位两台收银用的电脑犯了一样的毛病，开机过一会儿会死机，能用多久完全看脸，我过去之后怀疑是cpu过热导致的过热保护，于是就先拆开来清一下灰，结果拆开来被吓得不轻
                                                    这电脑好像好几年了一直在用也没人打理过，准备用纸硬着头皮擦干净的时候想到了这里有风枪，于是。。。
                                                    当然意识到该录像留念这一精彩时刻的时候已经吹完一台了，清灰效果还蛮好的，之后还拿我自己笔记本来吹了一下。。<br />
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <p class="sm_font grey">
                                        关注问题 43条评论 感谢 分享 收藏</p>
                                </div>
                                <div class="issue">
                                    <div style="width:100%;float:left;background:#F4F4F4;border-radius: 10px;padding: 10px;margin-top:4px">
                                        <a style="border:1px solid #3388CC">你在修电脑的时候遇到过哪些有趣的经历？</a>
                                        <p class="_p">
                                            <span>54</span>Eternaly, 咸鱼山地车骑手 <br>
                                            <div style="width:100%;float: left">
                                                <img src="images/zhihu.png" alt="" style="width:60%;">
                                                <div style="" class="sm_font">有一次老妈单位两台收银用的电脑犯了一样的毛病，开机过一会儿会死机，能用多久完全看脸，我过去之后怀疑是cpu过热导致的过热保护，于是就先拆开来清一下灰，结果拆开来被吓得不轻
                                                    这电脑好像好几年了一直在用也没人打理过，准备用纸硬着头皮擦干净的时候想到了这里有风枪，于是。。。
                                                    当然意识到该录像留念这一精彩时刻的时候已经吹完一台了，清灰效果还蛮好的，之后还拿我自己笔记本来吹了一下。。<br />
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <p class="sm_font grey">
                                        关注问题 43条评论 感谢 分享 收藏</p>
                                </div>
                            </div>

                            <div id="two" class="ui-body-d ui-content">
                                <div class="issue">
                                    <div style="width:100%;float:left;background:#F4F4F4;border-radius: 10px;padding: 10px;margin-top:4px">
                                        <a style="border:1px solid #3388CC">你在修电脑的时候遇到过哪些有趣的经历？</a>
                                        <p class="_p">
                                            <span>54</span>Eternaly, 咸鱼山地车骑手 <br>
                                            <div style="width:100%;float: left">
                                                <img src="images/zhihu.png" alt="" style="width:60%;">
                                                <div style="" class="sm_font">有一次老妈单位两台收银用的电脑犯了一样的毛病，开机过一会儿会死机，能用多久完全看脸，我过去之后怀疑是cpu过热导致的过热保护，于是就先拆开来清一下灰，结果拆开来被吓得不轻
                                                    这电脑好像好几年了一直在用也没人打理过，准备用纸硬着头皮擦干净的时候想到了这里有风枪，于是。。。
                                                    当然意识到该录像留念这一精彩时刻的时候已经吹完一台了，清灰效果还蛮好的，之后还拿我自己笔记本来吹了一下。。<br />
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <p class="sm_font grey">
                                        关注问题 43条评论 感谢 分享 收藏</p>
                                </div>
                                <div class="issue">
                                    <div style="width:100%;float:left;background:#F4F4F4;border-radius: 10px;padding: 10px;margin-top:4px">
                                        <a style="border:1px solid #3388CC">你在修电脑的时候遇到过哪些有趣的经历？</a>
                                        <p class="_p">
                                            <span>54</span>Eternaly, 咸鱼山地车骑手 <br>
                                            <div style="width:100%;float: left">
                                                <img src="images/zhihu.png" alt="" style="width:60%;">
                                                <div style="" class="sm_font">有一次老妈单位两台收银用的电脑犯了一样的毛病，开机过一会儿会死机，能用多久完全看脸，我过去之后怀疑是cpu过热导致的过热保护，于是就先拆开来清一下灰，结果拆开来被吓得不轻
                                                    这电脑好像好几年了一直在用也没人打理过，准备用纸硬着头皮擦干净的时候想到了这里有风枪，于是。。。
                                                    当然意识到该录像留念这一精彩时刻的时候已经吹完一台了，清灰效果还蛮好的，之后还拿我自己笔记本来吹了一下。。<br />
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <p class="sm_font grey">
                                        关注问题 43条评论 感谢 分享 收藏</p>
                                </div>
                                <div class="issue">
                                    <div style="width:100%;float:left;background:#F4F4F4;border-radius: 10px;padding: 10px;margin-top:4px">
                                        <a style="border:1px solid #3388CC">你在修电脑的时候遇到过哪些有趣的经历？</a>
                                        <p class="_p">
                                            <span>54</span>Eternaly, 咸鱼山地车骑手 <br>
                                            <div style="width:100%;float: left">
                                                <img src="images/zhihu.png" alt="" style="width:60%;">
                                                <div style="" class="sm_font">有一次老妈单位两台收银用的电脑犯了一样的毛病，开机过一会儿会死机，能用多久完全看脸，我过去之后怀疑是cpu过热导致的过热保护，于是就先拆开来清一下灰，结果拆开来被吓得不轻
                                                    这电脑好像好几年了一直在用也没人打理过，准备用纸硬着头皮擦干净的时候想到了这里有风枪，于是。。。
                                                    当然意识到该录像留念这一精彩时刻的时候已经吹完一台了，清灰效果还蛮好的，之后还拿我自己笔记本来吹了一下。。<br />
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    <p class="sm_font grey">
                                        关注问题 43条评论 感谢 分享 收藏</p>
                                </div>

                            </div>

                            <div id="three" class="ui-body-d ui-content">
                                <button>该板块还没有内容哦</button>
                            </div>

                            <div id="four" class="ui-body-d ui-content">
                                <button>该板块还没有内容哦</button></div>

                            <div id="five" class="ui-body-d ui-content">
                                <button>该板块还没有内容哦</button></div>
                        </div>

                    </div>


                </div>
            </div>







        </div>

        <div data-role="page" id="pagetwo" data-theme="b">
            <div data-role="header" data-position="fixed" data-fullscreen="true">
                <h1>欢迎来到我的主页</h1>
            </div>
            <div data-role="main" class="ui-content">
                <a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a>
            </div>

            <div data-role="footer" data-position="fixed" data-fullscreen="true">
                <h1>底部文本</h1>
            </div>
        </div>


        <div data-role="page" id="class-page">

            <div data-role="content">
                <ul data-role="listview" id="listview2">
                    <li>向右滑动切换页面</li>
                    <li>向右滑动切换页面</li>
                    <li>向右滑动切换页面</li>
                </ul>
            </div>

        </div>
        <div id="footer" data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#" data-icon="comment" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('easy.html')">
                            小黑书</a>
                    </li>
                    <li>
                        <a href="user.html" data-icon="user" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('friends.html')">
                            好友</a>
                    </li>
                    <li>
                        <a href="#" data-icon="star" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('active.html')">动态</a>
                    </li>
                </ul>
            </div>
        </div>
</body>
<script>
    $(document).on("pageinit", "#pageone",
        function () {
            /* 自动轮播 */
            var i = 1;
            setInterval(function autopaly() {
                if (i == 2) {
                    i = 0;
                }
                $('.lunbo-photo').css("left", -$(document.body).width() * 0.9 * i + "px");
                for (var j = 0; j < 2; j++) {
                    $('.lunbo-photo-daohang div')[j].className = "";
                }
                $('.lunbo-photo-daohang div')[i].className = "on";
                i++;
            }, 3000);
            /* 移动设备手动轮播*/

        }
    )
</script>

</html>